<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'经营状况',liner:false}"></header-top>
		<view class="mainpadding_top ffffff">
			<view class="flexbetween">
				<view class="flexleft">
					<view :class="datecurrent==1?'select':'noselect'" style="margin-right: 15rpx;"
						@click="switchDate(1)">年</view>
					<view :class="datecurrent==2?'select':'noselect'" style="margin-right: 15rpx;"
						@click="switchDate(2)">月</view>
					<view :class="datecurrent==3?'select':'noselect'" style="margin-right: 15rpx;"
						@click="switchDate(3)">周</view>
					<view :class="datecurrent==4?'select':'noselect'" style="margin-right: 15rpx;"
						@click="switchDate(4)">日</view>
				</view>
				<view class="flexleft selecttime_box radius" @click="shows = true">
					<view class="selecttime" style="margin-right: 20rpx;"></view>
					<view class="selecttime_text">{{startime==""?"自定义时间":startime+"-"+endtime}}</view>
				</view>
			</view>
			<view class="flexleft flex_wrap">
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">应收入（元）</view>
						<view class="strongtext margin_top2">{{dataAll.ysr_price}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">实收入（元）</view>
						<view class="strongtext margin_top2">{{dataAll.ssr_price}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">毛利润（元）</view>
						<view class="strongtext margin_top2">{{dataAll.klr_price}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">新增欠款（元）</view>
						<view class="strongtext margin_top2">{{dataAll.xzqk_price}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">收欠款（元）</view>
						<view class="strongtext margin_top2">{{dataAll.sqk_price}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">总欠款（元）</view>
						<view class="strongtext margin_top2">{{dataAll.total_qk_price}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">费用支出（元）</view>
						<view class="strongtext margin_top2">{{dataAll.fyzc_price}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">订单数</view>
						<view class="strongtext margin_top2">{{dataAll.sale_order_num}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">客户（个）</view>
						<view class="strongtext margin_top2">{{dataAll.custom_num}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">业务（个）</view>
						<view class="strongtext margin_top2">{{dataAll.staff_num}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">总收入（元）</view>
						<view class="strongtext margin_top2">{{dataAll.zsr_price}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;text-align: center;">
					<view>
						<view class="xiaohui">纯利润（元）</view>
						<view class="strongtext margin_top2">{{dataAll.clr_price}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding_top">
			<u-parse :content="content"></u-parse>
		</view>
		<!--日期 -->
		<!-- 开始时间 -->
		<u-datetime-picker :show="shows" v-model="value1" title="开始时间" mode="date" @confirm="confirmstart"
			@cancel="shows=false"></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="showss" v-model="value2" :minDate="mindate" title="结束时间" mode="date"
			@confirm="confirmend" @cancel="showss=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mindate: Number(new Date()), //最小时间
				pop_show: false,
				startime: this.jinnian(),
				endtime: this.riqi(0),
				datecurrent: 1,
				dataAll: {},
				pageShow: false,
				content: "",
			}
		},
		onLoad() {
			this.init()
			this.getconfig()

		},
		watch: {
			startime() {
				this.init()
			},
			endtime() {
				this.init()
			},
		},
		methods: {
			getconfig() {
				httpRequest.request('/dhtapi/index/getConfigInfo', 'GET', {}).then(res => {
					this.content = res.data.jyzk_des
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			init() {
				httpRequest.request('/dhtapi/Saleorder/jyzkData', 'GET', {
					start_time: this.startime,
					end_time: this.endtime
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			//日期选择
			confirmstart(e) {
				this.shows = false
				this.showss = true
				this.mindate = e.value
				this.startime = this.date(e.value)
			},
			confirmend(e) {
				this.showss = false
				this.endtime = this.date(e.value)
			},
			switchDate(value) {
				this.datecurrent = value
				if (value == 1) {
					// 获取今年第一天和今天
					this.startime = this.jinnian()
					this.endtime = this.riqi(0);
				} else if (value == 2) {
					// 获取本月第一天和今天
					this.startime = this.benyue();
					this.endtime = this.riqi(0);
				} else if (value == 3) {
					// 获取本周第一天和最后一天
					this.startime = this.zhouday(0);
					this.endtime = this.zhouday(1);
				} else if (value == 4) {
					// 获取今天
					this.startime = this.riqi(0);
					this.endtime = this.riqi(0);
				}
			},
			// 本周第一天“0”本周最后一天“1”
			zhouday(day) {
				let date = new Date()
				//本周第一天
				let start = new Date(date.getTime() - (3600 * 1000 * 24 * (date.getDay() == 0 ? 6 : date.getDay() - 1)))
				//本周最后一天
				let end = new Date(date.getTime() + (3600 * 1000 * 24 * (date.getDay() == 0 ? 0 : 7 - date.getDay())))
				if (day) {
					return this.date(end)
				} else {
					return this.date(start)
				}

			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 今年第一天
			jinnian() {
				let date1 = new Date();
				let year1 = date1.getFullYear();
				let firstMonth = year1 + '-' + '01' + '-' + '01';
				return firstMonth
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-table {
		min-width: 0 !important;
	}

	.img {
		width: 40rpx;
		height: 40rpx;
	}

	// 内容开始
	.select {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #0BBDCB;
		background-color: #0BBDCB;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #fff;
	}

	.noselect {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}
</style>